import React from 'react';
import {Popover, List, Icon, Input} from 'antd';
import  style from './index.less';


const searchData = (str) => {
  return [{
    text: <div>从星标邮箱搜索 <a>{str}</a></div>
  },{
    text: <div>从星标邮箱搜索 <a>{str}</a></div>
  },{
    text: <div>从收件箱搜索  <a>{str}</a></div>
  }]
}
export default function (props) {
    const [values, setValues] = React.useState(0);
    
    return (
      <Popover
          overlayStyle={{padding:0}}
          trigger="click"
          content={
            <List 
              dataSource={searchData(values)}
              renderItem={item => (
                <List.Item style={{width: 370}}>
                  {item.text}
                </List.Item>
              )}
            />
          }
      >
        <Input prefix={<Icon type="search" style={{ fontSize: 18 }} />} className={style.input} placeholder="在全部邮件中搜索" onChange= {(e:any) => { setValues(e.target.value)}}/>
      </Popover>
    )
}